<template>
  <div class="subnav-warp">
    <ul class="subnavs">
      <li v-for="(item, index) in subnav" :key="item.title">
        <router-link :to="item.link" class="subnav"
          ><span
            :class="index == currentIndex ? 'current' : ''"
            :style="index == 2 ? 'padding: 0 15px 0 11px' : ''"
            >{{ item.title }} <i class="f-r-white-icon" v-if="item.title == '歌单'"></i></span
        ></router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subnav: [
        { title: '推荐', link: '/discover', key: 'nokey' },
        { title: '排行榜', link: '/discover/toplist', key: 'toplist' },
        { title: '歌单', link: '/discover/playlist', key: 'playlist' },
        { title: '主播电台', link: '/discover/djradio', key: 'djradio' },
        { title: '歌手', link: '/discover/artist', key: 'artist' },
        { title: '新碟上架', link: '/discover/album', key: 'album' }
      ]
    }
  },
  computed: {
    // 当前页面对应subnav的下标
    currentIndex() {
      let index = this.subnav.findIndex(item => this.$route.path.includes(item.key))
      if (index === -1) {
        if (this.$route.path !== '/discover' && this.$route.path !== '/') {
          index = -2
        }
      }
      return index == -1 ? 0 : index
    }
  }
}
</script>

<style lang="less" scoped>
@import './subnav.less';
</style>
